<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>admin1</title>
<link rel="stylesheet" href="css/admin1.css" type="text/css"/>

<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.ui.all.js"></script>
<script type="text/javascript" src="lib/jquery.layout.js"></script>
<script type="text/javascript">

	var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method

	$(document).ready(function () {
		myLayout = $('body').layout({
			// enable showOverflow on west-pane so popups will overlap north pane
			west__showOverflowOnHover: true
		//,	west__fxSettings_open: { easing: "easeOutBounce", duration: 750 }
		});
		
		$("#ui-layout-west-tree").load("treeview.html");
 	});
	
</script>
</head>
<body>
<!-- manually attach allowOverflow method to pane -->
<div class="ui-layout-north">
  <div id="ui-layout-north-my">
  Exam On Line!
  </div>
</div>
<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
<div class="ui-layout-west">
  <div id="ui-layout-west-close"> <img onclick="myLayout.close('west')" src="image/fileclose.png" height="15" /> </div>
  <div id="ui-layout-west-tree"></div>
</div>
<div class="ui-layout-south">
  <button onclick="myLayout.toggle('north')" class="button_close_north">North</button>
  <button onclick="myLayout.toggle('west')"  class="button_close_west">West</button>
  <button onclick="myLayout.toggle('east')"  class="button_close_east">East</button>
</div>
<div class="ui-layout-east" onmouseover="myLayout.allowOverflow('north')" onmouseout="myLayout.resetOverflow(this)">
  <div id="ui-layout-east-close"> <img onclick="myLayout.close('east')" src="image/fileclose.png" height="15" /> </div>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <ul>
    <li>
      <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
        <li>four</li>
        <li>five</li>
      </ul>
      Drop-Down
      <!-- put this below so IE and FF render the same! -->
    </li>
  </ul>
</div>
<div class="ui-layout-center"> center content</div>
</body>
</html>